<template>
    <el-space direction="vertical" style="width:100%" alignment="start" fill>
        <el-table :data="list" border style="width: 100%">
            <el-table-column label="序号" width="50">
                <template #default="scope">
                    <span>{{ pageSize * (currentPage - 1) + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="proname" />
            <el-table-column label="图片展示" prop="img" width="100">
                <template #default="scope">
                    <el-image style="height: 60px" :src="scope.row.img1" />
                </template>
            </el-table-column>
            <el-table-column label="分类" prop="category" />
            <el-table-column label="品牌" prop="brand" />
            <el-table-column label="原价" prop="originprice" />
            <el-table-column label="折扣" prop="discount" />
            <el-table-column label="销量" prop="sales" />
            <el-table-column label="库存" prop="stock" />
            <el-table-column label="推荐" prop="isrecommend">
                <template #default="scope">
                    <el-switch :model-value="scope.row.isrecommend === 1"
                        @change="update('isrecommend', scope.row.isrecommend, scope.row.proid)" />
                </template>
            </el-table-column>
            <el-table-column label="秒杀" prop="isseckill">
                <template #default="scope">
                    <el-switch :model-value="scope.row.isseckill === 1"
                        @change="update('isseckill', scope.row.isseckill, scope.row.proid)" />
                </template>
            </el-table-column>
            <el-table-column label="售卖" prop="issale">
                <template #default="scope">
                    <el-switch :model-value="scope.row.issale === 1" disabled />
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-popconfirm title="确认删除吗?">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-space>
</template>

<script setup lang="ts">
const background = ref(false)
const disabled = ref(false)


import { computed, ref, onMounted } from 'vue'
import { getProList, updateRecommend, updateSeckill } from '@/apis/pro'
interface IPro { }
const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const tableData = ref<IPro[]>([])

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const list = computed(() => {
    return tableData.value.filter((item, index) => {
        return index >= pageSize.value * (currentPage.value - 1) && index < (pageSize.value * (currentPage.value - 1) + pageSize.value)
    })
})
const getList = () => {
    getProList().then(res => {
        console.log(res.data.data);
        tableData.value = res.data.data
    })
}
onMounted(() => {
    getList()
})
const update = (type: string, num: number, proid: string) => {
    switch (type) {
        case 'isrecommend':
            updateRecommend({ proid, type: 'isrecommend', flag: num === 1 ? false : true }).then(() => getList())
            break;
        case 'isseckill':
            updateSeckill({proid,type:'isseckill',flag:num===1 ? false : true }).then(() => getList())
        default:
            break;
    }
}
</script>

<style></style>